import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';

import '../common/api_service.dart';
import '../common/constants.dart';
import '../common/routes.dart';
import '../model/cartoon_model.dart';

class FollowingCartoonItemView extends StatefulWidget {
  final CartoonModel cartoon;

  const FollowingCartoonItemView({super.key, required this.cartoon});

  @override
  State<FollowingCartoonItemView> createState() => _FollowingCartoonItemViewState();
}

class _FollowingCartoonItemViewState extends State<FollowingCartoonItemView> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _isPlayLottieAnimation = false;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this);

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        print('Lottie animation finished!');
        setState(() {
          _isPlayLottieAnimation = false;
        });
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(right: 10),
      width: 65,
      child: Stack(
        children: [
          GestureDetector(
            onTap: () {
              Get.toNamed(Routes.CARTOON_INFO, arguments: {"cartoonId": widget.cartoon.id});
            },
            child: Column(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(16),
                  child: CachedNetworkImage(
                    fit: BoxFit.cover,
                    fadeInDuration: const Duration(milliseconds: 100),
                    fadeOutDuration: const Duration(seconds: 0),
                    imageUrl: widget.cartoon.avatar,
                    width: 56,
                    height: 56,
                  ),
                ),
                const SizedBox(height: 10),
                Text(
                  widget.cartoon.name,
                  style: const TextStyle(fontSize: 12),
                )
              ],
            ),
          ),
          widget.cartoon.hasFollow == 1
              ? (_isPlayLottieAnimation
                  ? Positioned(
                      left: 12,
                      bottom: 16,
                      child: Lottie.asset("assets/lotties/follow.json", width: 36, height: 27, controller: _controller, onLoaded: (composition) {
                        _controller.duration = composition.duration;
                        _controller.forward(from: 0.0);
                      }),
                    )
                  : const SizedBox.shrink())
              : Positioned(
                  left: -5,
                  bottom: 5,
                  child: TextButton(
                    onPressed: () {
                      setState(() {
                        _isPlayLottieAnimation = true;
                        widget.cartoon.hasFollow = 1;
                      });
                      ApiService().followCartoon(widget.cartoon.id, () {}, () {});
                    },
                    child: Center(
                      child: Container(
                        decoration: BoxDecoration(
                          color: Constants.themeColor,
                          borderRadius: BorderRadius.circular(9),
                        ),
                        width: 24,
                        height: 18,
                        child: const Icon(
                          Icons.add,
                          color: Colors.white,
                          size: 16,
                        ),
                      ),
                    ),
                  ),
                ),
        ],
      ),
    );
  }
}
